<template>
    <transition name="fade">
        <div :class="['cvu-spin', `cvu-spin-${theme}`]" v-if="!$slots.default && show">
            <!-- 默认风格 -->
            <div class="cvu-spin-body" v-if="theme=='default'"
                :style="{ background: background, zIndex: zIndex }"
            >
                <div class="cvu-spin-inner" :style="{borderTopColor: color}">
                    <span class="before" :style="{borderTopColor: color}"></span>
                    <span class="after" :style="{borderTopColor: color}"></span>
                </div>
                <div class="cvu-spin-content" :style="{color: color}">{{ content }}</div>
            </div>
            <!-- 方块旋转风格 -->
            <div class="cvu-spin-body" v-if="theme=='box'"
                :style="{ background: background, zIndex: zIndex }"
            >
                <div class="cvu-spin-inner">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div class="cvu-spin-content" :style="{color: color}">{{ content }}</div>
            </div>
            <!-- icon旋转风格 -->
            <div class="cvu-spin-body" v-if="theme=='icon'"
                :style="{ background: background, zIndex: zIndex }"
            >
                <div class="cvu-spin-inner">
                    <Icon :type="icon" :style="{color: color}" />
                </div>
                <div class="cvu-spin-content" :style="{color: color}">{{ content }}</div>
            </div>
        </div>
        <slot v-if="$slots.default" />
    </transition>
</template>
<script>
export default {
    name: 'cvu-spin',
    props: {
        // 主题
        theme: {
            type: String,
            default: 'default'
        },
        // icon图标
        icon: {
            type: String,
            default: 'ios-loading'
        },
        // 背景色
        background: String,
        // 文字颜色
        color: String,
        // 层级
        zIndex: Number,
        // 提示文字
        content: {
            type: String,
            default: '加载中，请耐心等待'
        }
    },
    data() {
        return {
            show: true
        }
    }
}
</script>
<style lang="scss" scoped>
@import '../../../style/_index.scss';
.cvu-spin{
    // 默认风格
    &.cvu-spin-default{
        .cvu-spin-body{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 9999;
            width: 100%;
            height: 100%;
            background: rgba($color: #FFF, $alpha: .6);
            .cvu-spin-inner{
                position: relative;
                left: 50%;
                top: 50%;
                width: 60px;
                height: 60px;
                margin: -33px 0 0 -33px;
                border-radius: 50%;
                border: 3px solid transparent; /* COLOR 1 */
                border-top-color: $primary-blue;
                -webkit-animation: loading 2s linear infinite;
                animation: loading 2s linear infinite;
                z-index: 1001;
                .before, .after {
                    position: absolute;
                    border-radius: 50%;
                    border: 3px solid transparent; /* COLOR 2 */
                    border-top-color: $primary-blue;
                }
                .before{top: 5px; left: 5px; right: 5px; bottom: 5px; -webkit-animation: loading 3s linear infinite; animation: loading 3s linear infinite;}
                .after{top: 15px; left: 15px; right: 15px; bottom: 15px; -webkit-animation: loading 1.5s linear infinite; animation: loading 1.5s linear infinite;}
                @-webkit-keyframes loading { 
                    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 
                    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
                }
                @keyframes loading {
                    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 
                    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
                }
            }
            .cvu-spin-content{
                position: relative;
                top: calc(50% + 20px);
                left: 50%;
                transform: translate(-50%, 0);
                display: inline-block;
                width: auto;
                line-height: 24px;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 14px;
                color: $primary-blue;
            }
        }
    }
    // 方块旋转风格
    &.cvu-spin-box{
        .cvu-spin-body{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 9999;
            width: 100%;
            height: 100%;
            background: rgba($color: #FFF, $alpha: .6);
            .cvu-spin-inner{
                position: relative;
                left: 50%;
                top: 50%;
                width: 42px;
                height: 42px;
                margin: -21px 0 0 -21px;
                border-radius: 50%;
                -webkit-animation: loading 2s linear infinite;
                animation: loading 2s linear infinite;
                z-index: 1001;
                span{
                    width:20px;
                    height:20px;
                    position:absolute;
                    background:red;
                    display:block;
                    -webkit-animation: loading_span 1s infinite linear;
                    animation: loading_span 1s infinite linear;
                    &:nth-child(1){
                        background:#2ecc71;
                    }
                    &:nth-child(2){
                        left: 22px;
                        background:#9b59b6;
                        -webkit-animation-delay: .2s;
                        animation-delay: .2s;
                    }
                    &:nth-child(3){
                        top: 22px;
                        background:#3498db;
                        -webkit-animation-delay: .4s;
                        animation-delay: .4s;
                    }
                    &:nth-child(4){
                        top: 22px;
                        left: 22px;
                        background:#f1c40f;
                        -webkit-animation-delay: .6s;
                        animation-delay: .6s;
                    }
                }
                @-webkit-keyframes loading {
                    from {-webkit-transform: rotate(0deg);}
                    to {-webkit-transform: rotate(360deg);}
                }
                @keyframes loading {
                    from {-webkit-transform: rotate(0deg);}
                    to {-webkit-transform: rotate(360deg);}
                }
                @-webkit-keyframes loading_span {
                    0% { -webkit-transform:scale(1); }
                    50% { -webkit-transform:scale(0.5); }
                    100% { -webkit-transform:scale(1); }
                }
                @keyframes loading_span {
                    0% { -webkit-transform:scale(1); }
                    50% { -webkit-transform:scale(0.5); }
                    100% { -webkit-transform:scale(1); }
                }
            }
            .cvu-spin-content{
                position: relative;
                top: calc(50% + 20px);
                left: 50%;
                transform: translate(-50%, 0);
                display: inline-block;
                width: auto;
                line-height: 24px;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 14px;
                color: $primary-blue;
            }
        }
    }
    // icon旋转风格
    &.cvu-spin-icon{
        .cvu-spin-body{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 9999;
            width: 100%;
            height: 100%;
            background: rgba($color: #FFF, $alpha: .6);
            .cvu-spin-inner{
                position: relative;
                left: 50%;
                top: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 42px;
                height: 42px;
                margin: -21px 0 0 -21px;
                border-radius: 50%;
                -webkit-animation: loading 2s linear infinite;
                animation: loading 2s linear infinite;
                z-index: 1001;
                /deep/.ivu-icon{
                    font-size: 36px;
                    color: $primary-blue;
                }
                @-webkit-keyframes loading {
                    from {-webkit-transform: rotate(0deg);}
                    to {-webkit-transform: rotate(360deg);}
                }
                @keyframes loading {
                    from {-webkit-transform: rotate(0deg);}
                    to {-webkit-transform: rotate(360deg);}
                }
            }
            .cvu-spin-content{
                position: relative;
                top: 52%;
                left: 50%;
                transform: translate(-50%, 0);
                display: inline-block;
                width: auto;
                line-height: 24px;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 14px;
                color: $primary-blue;
            }
        }
    }
}
</style>